<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="建设方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.pcName"
                  placeholder="请输入建设方名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="施工方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.pbName"
                  placeholder="请输入施工方名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.investment"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="是否国企施工"
                class="row-padding-bottom"
                v-if="isWhUser()"
              >
                <el-select
                  v-model="filterField.isStateOwnedConstruction"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-form-item>
                        <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                    </el-form-item> -->
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <exportBtn
                :dataLen="tableList.length"
                :filterField="filterField"
                api="api-s/report/export_QY_PROJECT"
              ></exportBtn>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="区域" width="160">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.areaDetailDesc"
                :columnName="'areaDetailDesc'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
            min-width="140"
          ></el-table-column>
          <!-- <el-table-column prop="pcName" label="建设方" align="center" :formatter=formatTd></el-table-column>
                <el-table-column prop="pbName" label="施工方" align="center" :formatter=formatTd></el-table-column> -->
          <el-table-column label="建设方" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pcName"
                :columnName="'pcName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="施工方" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="total"
            label="工程造价(万元)"
            sortable="custom"
            align="center"
            :formatter="dateForma"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="statusDesc"
            label="状态"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="investmentDesc"
            label="投资类型"
            align="center"
            :formatter="formatTd"
            min-width="140"
          ></el-table-column>
          <el-table-column
            prop="isStateOwnedConDesc"
            v-if="isWhUser()"
            label="是否国企施工项目"
            align="center"
            :formatter="formatTd"
            width="150px"
          ></el-table-column>

          <el-table-column
            prop="realNameTotal"
            label="总人数"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            min-width="110"
          ></el-table-column>
          <el-table-column
            prop="attPresentTotal"
            label="在场人数"
            sortable="custom"
            align="center"
            :render-header="renderHeader"
            width="160px"
          ></el-table-column>
          <el-table-column
            prop="attTotal"
            label="总考勤人次"
            sortable="custom"
            align="center"
            width="140px"
          ></el-table-column>
          <el-table-column
            prop="attTodayTotal"
            label="当日考勤人次"
            sortable="custom"
            align="center"
            width="180px"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="todayAtt(scope.$index, scope.row)"
                v-if="scope.row.attTodayTotal"
                >{{ scope.row.attTodayTotal }}</el-link
              >
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="archiveDate"
            label="建档时间"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            min-width="130"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="开工时间"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            min-width="130"
          ></el-table-column>
          <el-table-column
            prop="alertTotal"
            label="预警"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            min-width="110"
          ></el-table-column>
          <el-table-column label="操作" align="left" fixed="right" width="110">
            <template slot-scope="scope">
              <el-link
                v-if="isShowDetail"
                type="primary"
                @click="toDetail(scope.$index, scope.row)"
                >查看详情</el-link
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'projectListQY',
  mixins: [scrollTable],
  data() {
    return {
      // titleText: this.$store.state.activeMenuName,
      titleText: '项目列表',
      advanced: false,
      areasOptions: [], //区域
      //表格数据
      tableList: [],
      requestUrl: 'api-p/projectstats/expand/companypros',
      areaId: '', //区域
      //搜索条件
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        projectName: '', //项目名称
        areaId: '', //区域
        status: '', //开工状态
        industryId: '', //行业
        investment: '', //投资类型
        pcName: '', //建设方
        pbName: '', //施工方
        serverArea: '', // 服务部署区域
        isStateOwnedConstruction: '',
      },
      isShow: false, //列表加载
      loading: true,
      isShowDetail: '',

      pageNos: '1',
      pageSize: '20',
    }
  },
  created() {
    this.getInvestmenttype({})
    this.getStatus({})
    this.getIndustry({})
    //获取区域
    this.getAreas()

    const {
      projectName,
      areaId,
      status,
      industryId,
      investment,
      isSa,
      pageNo,
      pageSize,
      isStateOwnedConstruction,
    } = this.$route.query
    this.filterField = {
      sysAppCode: localStorage.getItem('judgeRoleCode'),
      projectName: projectName ? projectName : '', //项目名称
      areaId: areaId ? areaId : '', //区域
      status: status ? status : 'STARTED', //开工状态  ；默认只显示已开工状态的项目2020/10/19 恩施
      industryId: industryId ? industryId : '', //行业
      investment: investment ? investment : '', //投资类型
      isSa: isSa ? isSa : '', //是否开设专户
      isStateOwnedConstruction: isStateOwnedConstruction
        ? isStateOwnedConstruction
        : '',
    }
    if (areaId) {
      this.areaId = this.$route.query.areaId
    }
    this.pageNos = pageNo || 1
    this.$store.commit('SET_INFO', ['pageNo', pageNo || 1])
    this.pageSize = pageSize
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNos, this.pageSize)
    })
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('projectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListJSF:detail') > -1
  },
  computed: {
    ...mapState(['investmentOptions', 'statusOptions', 'industryOptions']),
  },
  watch: {
    $route(to, from) {
      // 10/19恩施需求，传递参数到详情页
      if (to.name == 'projectDetail') {
        window.localStorage.setItem(
          'filterField',
          JSON.stringify(this.filterField)
        )
        window.localStorage.setItem('pageNo', this.$refs.pagination.curPageNo)
        window.localStorage.setItem(
          'pageSize',
          this.$refs.pagination.pageSizeNumber
        )
      }
    },
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNos, this.pageSize)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    ...mapActions(['getInvestmenttype', 'getStatus', 'getIndustry']),
    getAreas() {
      this.axios({
        method: 'post',
        url: 'api-bs/areadic/base/areacombobox',
        data: {
          areaId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then((res) => {
          this.areasOptions = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取区域数据失败',
            type: 'error',
          })
        })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //跳转详情
    toDetail(index, row) {
      // row.pb true是施工方账号
      var companyType = ''
      if (row.pb === true) {
        companyType = 'SG'
      } else {
        companyType = 'JS'
      }
      // this.$router.push({
      //     path: "/home/companyProjectManage/projectDetailQY",
      //     name: "projectDetailQY",
      //     query: {
      //         projectId: row.projectId,
      //         companyType: companyType,
      //         path:'projectListQY'
      //     }
      // });
      // this.$store.commit("CHANGE_SLIDER_NAME", {oldUrl:"/home/project/projectListQY",newUrl:this.$router.currentRoute.fullPath})
      this.$router.push({
        path: '/home/monitorProjectManagement/projectDetail',
        name: 'projectDetail',
        query: {
          projectId: row.projectId,
          companyType: companyType,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectListQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc) {
        // let lately2 = (daterc/10000).toFixed(3);//对小数点后3位四舍五入
        // return lately2.substring(0,lately2.lastIndexOf('.')+3);
        // 直接四捨五入
        return (daterc / 10000).toFixed(2)
      } else {
        return '--'
      }
    },
    renderHeader(h, { column }) {
      if (column.label == '在场人数') {
        return h('span', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '统计三天内已打卡进门，但未打卡出门人员数量',
                placement: 'top',
              },
            },
            [
              h('i', {
                class: 'icon iconfont iconhuabanfuben',
                style: 'margin-left:5px;',
              }),
            ],
            {
              content: '统计三天内已打卡进门，但未打卡出门人员数量',
            }
          ),
        ])
      } else {
        return h('span', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content: '数据每小时更新一次，可能与考勤按日统计中不同',
                placement: 'top',
              },
            },
            [
              h('i', {
                class: 'icon iconfont iconhuabanfuben',
                style: 'margin-left:5px;',
              }),
            ],
            {
              content: '数据每小时更新一次，可能与考勤按日统计中不同',
            }
          ),
        ])
      }
    },
    // 当日考勤人次跳转工人考勤-按日统计
    todayAtt(index, row) {
      this.$router.push({
        path: '/home/monitorProjectManagement/projectDetail',
        name: 'projectDetail',
        query: {
          projectId: row.projectId,
          activeName: 'third',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectListQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
}
/deep/.whLabel .el-form-item__label {
  line-height: 18px !important;
}
@import '../../../static/css/filterArea.less';
</style>
